<template>
  <div class="dYSet">
    <el-dialog v-model="dialogTableVisible" :show-close="false" width="800" style="padding: 0">
      <template #header>
        <div class="titleBox">抖音设置</div>
      </template>
      <div class="content">
        <div>
          <span class="label">抖音企业号:</span>
          <span>{{ accountName }}</span>
        </div>
        <div class="checkBox_item">
          <span class="label">接收消息:</span>
          <div>
            <el-checkbox v-model="receivingMsg.privateLetter" label="点私信" size="small" />
            <el-checkbox v-model="receivingMsg.accessComments" label="评论" size="small" />
          </div>
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogTableVisible = false">取消</el-button>
          <el-button @click="save" type="primary">保存</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import {reactive, onMounted, ref} from 'vue'
import { get_bind_account_detail, setting_account_msg } from "@/api/settingtApi"
import {ElMessage} from "element-plus";

const dialogTableVisible = ref(false)
const receivingMsg = reactive({
  privateLetter: false,
  accessComments: false
})
const accountName = ref('')
const currentId = ref()
const openDYSet = (val) => {
  currentId.value = val
  // get_bind_account_detail({id: val}).then(res => {
  //   let data = res.data || {}
  //   accountName.value = data.accountName
  //   receivingMsg.privateLetter = data.receivingMsg.privateLetter
  //   receivingMsg.accessComments = data.receivingMsg.accessComments
  //   dialogTableVisible.value = true
  // })
  dialogTableVisible.value = true

}

const save = async () => {
  const res = await setting_account_msg({
    id: currentId.value,
    receivingMsg: receivingMsg
  })
  ElMessage.success(res.msg)
  dialogTableVisible.value = false
}

defineExpose({openDYSet})
</script>

<style scoped lang="scss">
.content {
  font-size: 12px;
  padding: 20px;
  &>div {
    display: flex;
    margin-bottom: 20px;
  }
  .label {
    display: inline-block;
    width: 100px;
  }
}
.titleBox {
  background: #fafafa;
  padding: 20px;
  font-size: 13px;
}
.checkBox_item {
  .label  {
    margin-top: 10px;
  }
  .tip {
    margin-top: 10px;
    color: #969696;
  }
}
.dialog-footer {
  padding: 0 20px 20px;
}
</style>